<template>
  <div class="ting_container">
    <div class="tt_top">
      <header-search></header-search>
      <!-- {'demo-enter-active':isShow} -->
      <div :class="['tt', , { 'demo-leave-active': !isShow }]">
        <ting-tab-list></ting-tab-list>
      </div>
    </div>

    <div class="wrap">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        
      >
        <ul>
          <li v-for="(item, i) in list" :key="i">
            <a>
              <ting-item
                :img="item.img"
                :title="item.title"
                :dataCount="item.dataCount"
                :id="item.id"
                :intro="item.intro"
                :releaseAt="item.releaseAt"
                :contentType="item.contentType"
              ></ting-item>
            </a>
          </li>
        </ul>
        <template #loading>
          <div class="loading">
            <van-loading color="#ff1e00" type="spinner" />
          </div>
        </template>
      </van-list>
    </div>

    <!-- <myy-load v-if="list.length == 0"></myy-load> -->
  </div>
</template>

<script>
import MyyLoad from "@/components/dowmload/MyLoad.vue"
import TingTabList from "@/views/ting/tingcomp/TingTabList.vue";
import TingItem from "@/views/ting/tingcomp/TingItem.vue";

import { initTingListData } from "@/request/api.js";


export default {
  name: "MyTing",
  data() {
    return {
      list: [],
      categoryname: "",
      pageNum: 1,
      pageSize: 10,
      loading: true,
      finished: false,
      isShow: true,
      
    };
  },
  components: {
    TingTabList,
    TingItem,
    MyyLoad,
  },
  watch: {
    $route: {
      immediate: true,
      deep: true,
      handler(val) {
        this.list = [];
        this.pageNum = 1;
        this.finished = false;
        this.categoryname = val.params.title;

        this.initData();
      },
    },

    
  },
  methods: {
    
    async initData() {
      let { data: res } = await initTingListData(
        this.categoryname,
        this.pageNum,
        this.pageSize
      );

      let list = [];

      res.data.subjects.forEach((item) => {
        let obj = {
          img: "https:" + item.coverPathSmall,
          title: item.title,
          dataCount: item.dataCount,
          id: item.id,
          intro: item.intro,
          releaseAt: item.releaseAt,
          contentType:item.contentType
        };

        list.push(obj);
      });

      this.list.push(...list);

      this.loading = false;

      if (list.length == 0) {
        this.finished = true;
      }

      console.log(res);
    },
    goBack() {
      this.$router.replace({ path: "/" });
      //replace替换原路由，作用是避免回退死循环
    },
    onLoad() {
      this.pageNum++;

      this.initData();
    },
  },
  mounted() {
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      window.addEventListener("popstate", this.goBack, false);
    }

    document.addEventListener("scroll", () => {
      if (window.pageYOffset >= 300) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    });
  },

  destroyed() {
    window.removeEventListener("popstate", this.goBack, false);
    document.removeEventListener("scroll", document, false);
  },
};
</script>

<style lang="scss" scoped>
.ting_container {
  padding-top: 95px;
  .tt_top {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    //   height: 200px;
    background-color: #fff;
    z-index: 9999;
    .tt {
      transition: all 0.5s ease;
    }
  }
  .wrap {
    ul {
      li {
        padding-left: 15px;
        a {
          display: block;
        }
      }
    }
  }
}

.demo-enter-active {
  animation: show 0.1s ease;
}

.demo-leave-active {
  opacity: 0;
  display: none;
}
</style>

